<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>06-键盘事件的修饰符</title>
    <link rel="stylesheet" href="../Bootstrap/css/bootstrap.min.css">
    <script type="text/javascript" src="../VueJs/vue.js"></script>
</head>
<body>
    <!-- 
        总结
            a. 注册事件时，可以给对应的事件加上修饰符，vue提供了默认的几个名称
            b. 除了使用默认名称 @keyup.enter="", 还可以使用键盘码 @keyup.13=""
            c. mdn 上已经废弃了对于 keyCode，但是还没有移除，浏览器还在支持
            d. 在使用keyup和keydown时，根据不同的情景使用不同方式
     -->
    <div id="demo">
        <div class="container">
            <h3>键盘事件</h3>
            <!-- keyup keydown input keypress 根据键盘码 -->

           <form action="#" class="form-inline">
                <p class="input-group input-inline">
                    事件修饰符enter： 
                    <!-- <input type="text" class="form-control" placeholder="普通的键盘输入" @keyup.enter="insertMsg"> -->
                    <input type="text" class="form-control" placeholder="修饰符enter" @keyup.13="insertMsg">
                </p>
                <p class="input-group input-inline">
                    事件修饰符delete： 
                    <input type="text" class="form-control" placeholder="修饰符delete" @keyup.delete="insertMsg">
                </p>
                <p class="input-group input-inline">
                    事件修饰符space： 
                    <input type="text" class="form-control" placeholder="修饰符space" @keyup.space="insertMsg">
                </p>
                <p class="input-group input-inline">
                    事件修饰符tab： 
                    <input type="text" class="form-control" placeholder="修饰符tab" @keydown.tab="insertMsg">
                </p>
                <p class="input-group input-inline">
                    事件修饰符esc： 
                    <input type="text" class="form-control" placeholder="修饰符esc" @keyup.esc="insertMsg">
                </p>
           </form>
        </div>
    </div>

    <script type="text/javascript">
        //阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false
    
        new Vue({
            el: '#demo',
            data: {},
            methods: {
                insertMsg(e) {
                    console.log('执行了事件')
                    // console.log(100);
                    // if(e.keyCode === 13) {
                    //     console.log('按了回车')
                    // }
                }
            }
        })
    </script>
</body>
</html>